<template>
  <div class="content">
    <div class="title">
      <h1>海康威视实习生编程题</h1>
      <span class="code"
            @click="dialogVisible = true"><a href="javascript:"></a></span>
    </div>
    <div class="attention">
      <span>
        请打开编译器，完成此页面的开发。
        <br>
        注意：
        <br>
        1. 使用vue-cli开发。
        <br>
        2. 如使用css预编译器，请使用less，不要使用sass。
        <br>
        3. 问题需组件化开发，以达到组件复用的目的。
        <br>
        4. 完成后，将源码(除node_modules外)打包压缩,与其他题目答案一起发送至邮箱yuhua7@hikvision.com
      </span>
    </div>
    <el-dialog :visible.sync="dialogVisible"
               width="250px"
               :before-close="handleClose">
      <div class="code-img">
        <a href="javascript:"><img src="https://qr.wjx.cn/handler/qrcode.ashx?chl=https%3a%2f%2fwww.wjx.cn%2fvm%2frBmQ3hC.aspx&chs=200x200&sign=0968f63e1f98d30d26ea3adadbf0ae3446bfa3c1"
               alt=""></a>
      </div>
      <div class="tips">手机扫描二维码答题</div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'Header',
  data () {
    return {
      dialogVisible: false
    }
  },
  methods: {
    handleClose (done) {
      this.dialogVisible = !this.dialogVisible
    }
  }
}
</script>

<style scoped lang="less">
.content {
  background: #ffffff;
  padding: 55px 81px 35px;
  .title {
    width: 749px;
    height: 40px;
    margin: 0 auto 35px;
    position: relative;
    background: #ffffff;
    color: #0095ff;
    text-align: center;
    font-size: 14px !important;
    .code {
      position: absolute;
      width: 50px;
      height: 50px;
      background: url("https://qr.wjx.cn/handler/qrcode.ashx?chl=https%3a%2f%2fwww.wjx.cn%2fvm%2frBmQ3hC.aspx&chs=50x50&sign=0968f63e1f98d30d26ea3adadbf0ae3446bfa3c1")
        no-repeat;
      right: 0;
      top: -5px;
    }
  }
  .attention {
    width: 100%;
    height: 180px;
    // background: chartreuse;
    border-bottom: 1px dashed #c9c9c9;
    line-height: 26px;
  }
  .code-img {
    width: 200px;
    height: 200px;
    margin: 0 auto;
    img {
      width: 200px;
      height: 200px;
    }
  }
  .tips {
    text-align: center;
  }
}
</style>
